<template>
  <div class="dashboard-container">
    <div class="app-container">
      <hearderSearch :work-status="workStatus" @searchWork="searchWork" />
      <el-card class="main-table">
        <div class="btn">
          <el-button icon="el-icon-circle-plus-outline" class="new-work" @click="createDialogShow = true">新建</el-button>
          <el-button class="work-info" @click="getWorkValue">工作配置</el-button>
        </div>
        <!-- table -->
        <el-table
          :data="workList"
          style="width: 100%"
          :header-cell-style="{background:'#f3f6fb'}"
        >
          <el-table-column
            type="index"
            width="80"
            label="序号"
          />
          <el-table-column
            prop="taskCode"
            label="工单编号"
            width="226"
          />
          <el-table-column
            prop="innerCode"
            label="设备编号"
            width="224"
          />
          <el-table-column
            prop="taskType.typeName"
            label="工单类型"
            width="220"
          />
          <el-table-column
            label="工单方式"
            width="220"
          >
            <template slot-scope="{row}">
              <span>{{ userType(row.createType) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
            width="220"
          />
          <el-table-column
            prop="userName"
            label="运营人员"
            width="220"
          />
          <el-table-column
            prop="updateTime"
            label="创建日期"
            width="160"
          />
          <el-table-column
            label="操作"
            width="100"
          >
            <template slot-scope="{row}">
              <span class="work-list-info" @click="getWorkInfo(row.taskId)">查看详细</span>
            </template></el-table-column>
        </el-table>
        <el-row class="bottom-pre" type="flex" align="center" justify="space-between">
          <el-col :span="20">
            <span class="demonstration">共{{ pagerInfo.totalCount }}条记录</span>
            <span class="demonstration">第{{ pagerInfo.pageIndex }}/{{ pagerInfo.totalPage }}页</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" align="center" justify="start">
              <el-col :span="8" />
              <el-col :span="8">
                <el-button
                  class="page up-page"
                  :class="{'no-btn':pagerInfo.pageIndex==='1'}"
                  :disabled="pagerInfo.pageIndex==='1'"
                  @click="upPage"
                >上一页</el-button>
              </el-col>
              <el-col :span="8">
                <el-button
                  class="page last-page"
                  :class="{'no-btn':pagerInfo.pageIndex===pagerInfo.totalPage }"
                  :disabled="pagerInfo.pageIndex===pagerInfo.totalPage"
                  @click="nextPage"
                >下一页</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <!-- 工单详细dialog -->
      <ggDialog v-if="workInfoShow" :replenishment-dialog-show.sync="replenishmentDialogShow" :create-dialog-show.sync="createDialogShow" :work-info-show.sync="workInfoShow" :work-info="workInfo" @updateMyShiTu="getWorkSearchApi()" />
      <!-- 补货详情显示框 -->
      <infoDialog v-if="replenishmentDialogShow" :replenishment-list="replenishmentList" :replenishment-dialog-show.sync="replenishmentDialogShow" />
      <!-- 新增和重创建工单 -->
      <createDialog v-if="createDialogShow" :replenishment-dialog-show-info.sync="replenishmentDialogShowInfo" :work-info="workInfo" :create-dialog-show.sync="createDialogShow" @updateMyShiTu="getWorkSearchApi()" @getReplenishmentListInfo="replenishmentListInfo = $event" />
      <!-- 新增和重创建工单的补货详情 -->
      <creatDialogInfo v-if="replenishmentDialogShowInfo" :replenishment-list-info="replenishmentListInfo" :replenishment-dialog-show-info.sync="replenishmentDialogShowInfo" />
      <!-- 工单配置 -->
      <workDeploy v-if="deployShow" :alert-value.sync="alertValue" :deploy-show.sync="deployShow" />
    </div>
  </div>
</template>

<script>
import hearderSearch from '../component/hearderSearch.vue'
import ggDialog from '../component/ggDailog.vue'
import infoDialog from '../component/infoDialog.vue'
import createDialog from '../component/createDialog.vue'
import creatDialogInfo from '../component/creatDialogInfo.vue'
import workDeploy from '../component/workDeploy.vue'
import { workStatusApi, workSearchApi, getWorkInfoByIdApi, getReplenishmentInfo, getWorkValue } from '@/api'
export default {
  components: {
    hearderSearch,
    ggDialog,
    infoDialog,
    createDialog,
    creatDialogInfo,
    workDeploy
  },
  data() {
    return {
      // 工单状态
      workStatus: {},
      // 工单数据报表
      workList: [],
      // 搜索数据列表条件
      searchForm: {
        isRepair: false,
        pageIndex: 1,
        pageSize: 10
      },
      pagerInfo: {
        pageIndex: 0,
        totalCount: 0,
        totalPage: 0
      },
      // 工单详细显示框
      workInfoShow: false,
      // 工单详细信息列表
      workInfo: {},
      // 补货详情显示框
      replenishmentDialogShow: false,
      // 补货详细
      replenishmentList: [],
      // 新增工单
      createDialogShow: false,
      // 添加工单的补货详细
      replenishmentDialogShowInfo: false,
      // 添加工单的补货详细数据
      replenishmentListInfo: [],
      // 工单配置显示框
      deployShow: false,
      // 阈值
      alertValue: 0
    }
  },
  computed: {
    userType: () => (typeId) => typeId === 1 ? '手动' : '自动'
  },
  watch: {
    createDialogShow(val, oldval) {
      if (val === false && oldval === true) {
        this.workInfoShow = false
      }
      if (val === false) {
        this.workInfo = {}
      }
    },
    workInfoShow(val, oldval) {
      if (val === false) {
        this.workInfo = {}
      }
    }
  },
  created() {
    this.workStatusApi()
    this.getWorkSearchApi()
  },
  methods: {
    // 获取工单状态列表
    async workStatusApi() {
      const { data } = await workStatusApi()
      this.workStatus = data
    },
    async  getWorkSearchApi() {
      const { data } = await workSearchApi(this.searchForm)
      this.pagerInfo.pageIndex = data.pageIndex
      this.pagerInfo.pageSize = data.pageSize
      this.pagerInfo.totalCount = data.totalCount
      this.pagerInfo.totalPage = data.totalPage
      this.workList = data.currentPageRecords
      console.log(this.workList)
    },
    async  searchWork(info) {
      this.searchForm = info
      this.getWorkSearchApi()
    },
    // 上一页
    upPage() {
      this.searchForm.pageIndex--
      this.getWorkSearchApi()
    },
    // 下一页
    nextPage() {
      this.searchForm.pageIndex++
      this.getWorkSearchApi()
    },
    // 获取工单详细信息
    async getWorkInfo(id) {
      const { data } = await getWorkInfoByIdApi(id)
      this.workInfo = data
      // console.log(this.workInfo)
      const res = await getReplenishmentInfo(this.workInfo.taskId)
      this.replenishmentList = res.data
      this.workInfoShow = true
    },
    // 获取阈值
    async getWorkValue() {
      const { data } = await getWorkValue()
      this.alertValue = data
      console.log(this.alertValue)
      this.deployShow = true
    }
  }

}
</script>

<style scoped lang='less'>
.app-container{
.main-table{
 width: 1713px;
 .btn{
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  height: 36px;
  .new-work{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    color:#fff;
    background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    .el-icon-circle-plus-outline{
      font-size: 16px;
    }
  }
  .work-info{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
 }
 .work-list-info{
  cursor: pointer;
  color: #5f84ff;
 }
 .demonstration{
  display: inline-block;
  margin-right: 15px;
  font-size: 16px!important;
    color: #dbdfe5!important;
    line-height: 40px;
 }
 .bottom-pre{
  padding: 32px 16px 12px 16px;
 }
 .page{
    background-color: #d5ddf8;
    color: #606266;
    display: inline-block;
    font-size: 13px;
    height: 32px;
    width: 70px;
    padding: 0;
    line-height: 32px;
    vertical-align: top;
    box-sizing: border-box;
 }
 .no-btn{
  background: #edf0f9;
  color: #d8dde3;
 }
 /deep/.el-table__row>td{
  /* 去除表格线 */
  border: none!important;
}
   }
}
</style>
